import React, {useEffect, useState} from 'react';
import {View,} from '@tarojs/components';

import styles from './index.module.scss';
import {Image, Stepper} from "@taroify/core";

const Index: React.FC = () => {
    const [sizes] = useState(['S', 'M', 'L'])
    const [colors] = useState(['白色'])
    const image = 'https://tdesign.gtimg.com/miniprogram/template/retail/goods/nz-08a.png'

    useEffect(() => {
        load();
    }, []);

    const load = async () => {

    }

    return (
        <View className={styles.page}>
            <View className={styles.page_head}>
                <View className={styles.page_head_left}>
                    <Image className={styles.page_body_image} src={image}
                           width={176} height={176}
                           mode={'aspectFill'}></Image>
                </View>
                <View className={styles.page_head_right}>
                    <View className={styles.page_head_right_top}>
                        纯色纯棉休闲圆领短袖T恤纯白亲肤厚柔软细腻面料纯白短袖套头T恤
                    </View>
                    <View className={styles.page_head_right_center}>
                        <View className={styles.page_head_right_center_left}>
                            ¥
                        </View>
                        <View className={styles.page_head_right_center_right}>
                            259
                        </View>
                    </View>
                    <View className={styles.page_head_right_bottom}>
                    </View>
                </View>
            </View>
            <View className={styles.page_body}>
                <View className={styles.page_body_top}>
                    <View className={styles.page_body_top_top}>
                        颜色
                    </View>
                    <View className={styles.page_body_top_body}>
                        {
                            colors.map((item, index) => {
                                return <View key={index} className={styles.page_body_top_body_item}>{item}</View>
                            })
                        }
                    </View>
                </View>
                <View className={styles.page_body_center}>
                    <View className={styles.page_body_center_top}>
                        尺码
                    </View>
                    <View className={styles.page_body_center_center}>
                        {
                            sizes.map((item, index) => {
                                return <View key={index} className={styles.page_body_center_center_item}>{item}</View>
                            })
                        }
                    </View>
                </View>
                <View className={styles.page_body_bottom}>
                    <View className={styles.page_body_bottom_left}>
                        购买数量
                    </View>
                    <View className={styles.page_body_bottom_right}>
                        <Stepper />

                    </View>
                </View>
            </View>
            <View className={styles.page_foot}>
                <View className={styles.page_foot_button}>
                    <view className={styles.page_foot_button_left}>
                        加入购物车
                    </view>
                    <view className={styles.page_foot_button_right}>
                        立即购买
                    </view>
                </View>
            </View>
        </View>
    );
};

export default Index;
